/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Embed, RCell, Table, TableBody, TableRow,Text,
} from "customize-easy-ui-component";
import {FadeImage} from "../../comp/FadeImage";
import Img_Ma from "../../images/MA.png";
import Img_Fbpi from "../../images/FBPI.png";
import Img_ReportNoQR from "../../images/reportNoQR.png";

/**锅炉 封面概要；
 * */
export const 首页设备概况Oragn= ({theme, orc, rep } :{theme: any, orc:any, rep:any}
) => {
  return <Table fixed={ ["20%","%"] }  css={ {borderCollapse: 'collapse'} }>
    <TableBody rheight={40}>
      <TableRow>
        <RCell css={{border:'none'}}>锅炉型号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc?.型号 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>使用单位：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.使用单位 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>分支机构：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.分支机构 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>单位内编号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.单位内部编号 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>使用登记证编号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc?.使用证号 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>检验日期：</RCell>
        {orc.检验日期1? <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期1} 至 {orc.检验日期}</CCell>
            :
            <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期}</CCell>
        }
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>监察识别码：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.监察识别码 || '／'}</CCell>
      </TableRow>
    </TableBody>
  </Table>;
};

/**没有Img_Fbpi标记的 没有FVPVI; 就一个模板编码
 * */
export const ReportFirstPageHeadLeast= ({theme , rep, mbbm,height='1rem' } :{theme: any, rep:any, mbbm:string,height?:string}
) => {
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height,
    }}>
      <div css={{overflow: 'hidden'}}>
      </div>
      <div css={{overflow: 'hidden'}}>
        <Text variant="h6" css={{fontSize:'0.8rem',lineHeight:1.2}}>{mbbm}</Text>
        <Embed css={{width: "120px",margin: "auto",top: '-0.65rem'}} width={78} height={35}>
        </Embed>
      </div>
    </div>
  </React.Fragment>;
};

/**齐全 都有的
 * */
export const ReportFirstPageHeadAll= ({theme , rep, mbbm } :{theme: any, rep:any, mbbm:string}
) => {
  // const atPrint = useMedia('print');
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '8.5rem',
    }}>
      <div css={{overflow: 'hidden'}}>
        <Embed css={{width: "155px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Ma}/>
        </Embed>
        <Text css={{position: 'relative', top: '-1.1rem', fontSize: '0.9rem'}}>181320110160</Text>
      </div>
      <div>
        <Embed css={{width: "140px", margin: "auto"}} width={10} height={10}>
          <FadeImage src={Img_ReportNoQR}/>
        </Embed>
      </div>
      <div css={{overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
        <Text variant="h6" css={{fontSize: '0.8rem'}}>{mbbm}</Text>
        <Embed css={{width: "120px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Fbpi}/>
        </Embed>
        <div css={{
          display: 'flex',
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}
        ><Text variant="h5">报告编号：</Text>
          <Text variant="h5" css={{textDecoration: 'underline'}}>{rep?.isp?.no}</Text>
        </div>
      </div>
    </div>
  </React.Fragment>;
};
